<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{commons/adminCommon::adminHead('西安旅游电子票务后台')}">
        <title>西安旅游电子票务后台</title>
    </head>

    <body>
        <nav th:replace="~{commons/adminCommon::navHead}"></nav>

        <div class="container-fluid">
            <div class="row">
                <nav th:replace="~{commons/adminCommon::navbar(1)}"></nav>

                <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                    <div class="chartjs-size-monitor"
                         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                        <div class="chartjs-size-monitor-expand"
                             style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                            <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                        </div>
                        <div class="chartjs-size-monitor-shrink"
                             style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                            <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                        <h1 class="h2">仪表盘</h1>
                    </div>

                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div class="row">
                        <div class="col-sm-4" id="echartsMain1" style="width: 800px; height: 600px"></div>
                        <div class="col-sm-4" id="echartsMain2" style="width: 800px; height: 600px"></div>
                        <div class="col-sm-4" id="echartsMain3" style="width: 800px; height: 600px"></div>
                    </div>
                    <hr>
                    <div class="row mt-3">
                        <table class="table table-hover">
                            <thead>
                                <tr class="disabled">
                                    <th>景点数量</th>
                                    <th>用户数量</th>
                                    <th>订单总数</th>
                                    <th>售票总数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="table-primary">
                                    <td class="font-weight-bold" th:text="${countData.siteCount}">100</td>
                                    <td class="font-weight-bold" th:text="${countData.userCount}">100</td>
                                    <td class="font-weight-bold" th:text="${countData.orderCount}">100</td>
                                    <td class="font-weight-bold" th:text="${countData.ticketingCount}">100</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </main>
            </div>
        </div>

        <th:block th:replace="~{commons/adminCommon::commonJs}"/>
        <script th:src="@{/js/echarts.min.js}" src="../../static/js/echarts.min.js"></script>
        <script th:inline="javascript">
            $(function () {
                // 统计图表 - 柱状图
                let chart1 = echarts.init(document.getElementById('echartsMain1'));
                chart1.setOption({
                    title: {
                        text: '数据统计柱状图',
                        x: 'center'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数量'],
                        bottom: 0
                    },
                    xAxis: {
                        data: ["景点数量", "用户数量", "订单总数", "售票总数"]
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: []
                        }
                    ]
                });
                // 统计图表 - 饼状图
                let chart2 = echarts.init(document.getElementById('echartsMain2'));
                chart2.setOption({
                    title: {
                        text: '数据统计饼状图',
                        x: 'center'
                    },
                    tooltip: {},
                    legend: {
                        data: ["景点数量", "用户数量", "订单总数", "售票总数"],
                        bottom: 0
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '55%',
                            data: []
                        }
                    ]
                });
                // 统计图表 - 南丁格尔图
                let chart3 = echarts.init(document.getElementById('echartsMain3'));
                chart3.setOption({
                    title: {
                        text: '数据统计南丁格尔图',
                        x: 'center'
                    },
                    tooltip: {},
                    legend: {
                        data: ["景点数量", "用户数量", "订单总数", "售票总数"],
                        bottom: 0
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '55%',
                            roseType: 'angle',
                            data: []
                        }
                    ]
                });

                // 加载数据
                chart1.showLoading();
                chart2.showLoading();
                chart3.showLoading();
                $.ajax({
                    url: /*[[@{/admin/count}]]*/'',
                    method: 'GET',
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            chart1.hideLoading();
                            chart2.hideLoading();
                            chart3.hideLoading();
                            chart1.setOption({
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: '数量',
                                    data: [
                                        resp.data.siteCount,
                                        resp.data.userCount,
                                        resp.data.orderCount,
                                        resp.data.ticketingCount
                                    ]
                                }]
                            });
                            chart2.setOption({
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: '数量',
                                    data: [
                                        {name: '景点数量', value: resp.data.siteCount},
                                        {name: '用户数量', value: resp.data.userCount},
                                        {name: '订单总数', value: resp.data.orderCount},
                                        {name: '售票总数', value: resp.data.ticketingCount}
                                    ]
                                }]
                            });
                            chart3.setOption({
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: '数量',
                                    data: [
                                        {name: '景点数量', value: resp.data.siteCount},
                                        {name: '用户数量', value: resp.data.userCount},
                                        {name: '订单总数', value: resp.data.orderCount},
                                        {name: '售票总数', value: resp.data.ticketingCount}
                                    ]
                                }]
                            });
                        } else {
                            bootstrapQ.msg({msg: resp.message, type: 'warning', time: 3000});
                        }
                    },
                    error: function (error) {
                        bootstrapQ.msg({msg: "网络异常 => " + error, type: 'danger', time: 3000});
                    }
                })
            })
        </script>
    </body>
</html>